<template>
  <div>
    <el-form :inline="true" :model="selectForm" class="demo-form-inline">
      <el-form-item label="分类">
        <template>
          <el-select v-model="selectForm.type" placeholder="请选择分类">
            <el-option
              v-for="item in baseCommonTypeList"
              :key="item.type"
              :label="item.typeName"
              :value="item.type">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="selectForm.baseCommonName" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="info" @click="getListByParams()" style="padding-left: 15px">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insertAndUpdate()" style="padding-left: 15px">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="entityList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        sortable
        width="100">
      </el-table-column>
      <el-table-column
        prop="baseCommonValue"
        label="名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="typeName"
        label="分类"
        width="150">
      </el-table-column>
      <el-table-column
        prop="baseCommonKey"
        label="编码"
        width="200">
      </el-table-column>
      <el-table-column
        prop="status"
        label="是否启用"
        width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            disabled>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="250">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="insertAndUpdate(scope.row.id)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteMenu(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;padding-right: 5%;padding-top: 20px">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!--  弹窗： 新增/修改  -->

  </div>
</template>

<script>
  export default {
    data() {
      return {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        baseCommonTypeList: {
          type: '',
          typeName: ''
        },
        selectForm: {
          type: '',
          baseCommonName: ''
        },
        entityList: [
          {
            id: '',
            key: '',
            baseCommonValue: '',
            baseCommonKey: '',
            typeName: '',
            status: '',
            createId: '',
            createName: '',
            createTime: ''
          }
        ]
      }
    },
    created() {
      this.getBaseCommonTypeList();
      this.getListByParams();
    },
    methods: {
      // 获取公共字段所有类型
      async getBaseCommonTypeList() {
        const {data: res} = await this.$http.get("/sysBaseCommon/getBaseCommonTypeList")
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.baseCommonTypeList = res.baseCommonTypeList;
      },
      // 条件分页查询
      async getListByParams() {
        const {data: res} = await this.$http.get("/sysBaseCommon/getPageByParams", {
          params: {
            type: this.selectForm.type,
            value: this.selectForm.baseCommonName,
            page: this.pageIndex,
            limit: this.pageSize
          }
        })
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.entityList = res.entityList
        this.totalPage = res.total
        this.$message.success(res.msg)

      },
      async insertAndUpdate(id) {

      },
      // 逻辑删除
      deleteMenu(id) {

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getListByParams()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getListByParams()
      }
    }
  }
</script>

